<template>
  <div class="trendLineChart-right">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="query-form"
      style="margin-bottom: 20px"
    >
      <el-select v-model="value" placeholder="请选择" style="width: 120px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-form-item label="" prop="minute" :rules="rules.numRule">
        最新
        <el-input
          v-model="queryParams.minute"
          :min="1"
          :max="120"
          style="width: 120px"
          type="number"
        ></el-input>
        分钟
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="tableStyle" v-if="value == 'tableOpen'">
      <el-table
        :data="tableData"
        ref="dataTable"
        border
        style="margin-top: 20px"
        :height="height"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="statusName" align="center" label="坐标轴">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.yValue"
              @change="selectNumber(scope.row, scope.$index)"
            >
              <el-option
                v-for="(item, index) in addTableSelect"
                :key="item.yValue"
                :label="item.yLable"
                :value="item.yValue"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="meteName" align="center" label="表具名称">
        </el-table-column>
        <el-table-column prop="indexName" align="center" label="点位名称" />
        <el-table-column
          prop="indexUnit"
          align="center"
          label="单位"
          :formatter="unitFormat"
        />
        <el-table-column prop="value" align="center" label="当前值">
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="openDialog(scope.row, 'line')"
              >趋势图
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="openDialog(scope.row, 'table')"
              >数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <component
      ref="lincharVue"
      :is="vuename"
      :chart-data="liveLineChartData"
      style="margin-top: 20px"
    ></component>
    <!--历史曲线dialog-->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-row style="padding:16px 16px 0;margin-bottom:32px;">
        <history-alarm-view
          ref="historyAlarmView"
          :code="code"
          :activeName="activeName"
          v-if="dialogType === 'line'"
        />
        <TableDialog :code="code" v-else :open="open" />
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTrendSettingIndexLineData,
  getSvgTrendSettingIndex
} from "@/api/dataMonitoring/realTimeTrend/realTimeTrend";
import historyAlarmView from "../../energyAlarm/realTimeAlarm/historyAlarmView";
import mixins from "@/layout/mixin/getHeight";
import TableDialog from "./tableDialog";

let timers;
export default {
  name: "energyIndex",
  components: {
    lincharVue: () =>
      import("../../dataMonitoring/realTimeTrend/LineChart.vue"),
    historyAlarmView,
    TableDialog
  },
  mixins: [mixins],
  data() {
    const checkNum = (rule, value, callback) => {
      let reg = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/;
      if ("" === value && !reg.test(value)) {
        callback(new Error("分钟需数字并且不能为空"));
      } else if (0 > value || 120 < value) {
        callback(new Error("数字范围1~120的正整数"));
      } else {
        callback();
      }
    };
    return {
      value: "tableOpen",
      yValue: "",
      minute: undefined,
      count: undefined,
      pickerOptions: {
        /*  value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],*/
      },
      timeArr: [],
      deviceCategory: undefined,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      dateRange: [],
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 10,
      // 指标信息表格数据
      List: [],
      energyindexList: [],
      // 弹出层标题
      title: null,
      dialogType: null,
      // 是否显示弹出层
      open: false,
      // 主键字典
      indexIdOptions: [],
      // 指标名称字典
      nameOptions: [],
      // 指标编码字典
      codeOptions: [],
      // 系统指标分类，1-能源类，2-产品类，3-能效类，4-经营类，5-其他字典
      indexCategoryOptions: [],
      // 备注字典
      remarkOptions: [],
      // 单位字典
      unitIdOptions: [],
      queryParams: {
        minute: undefined,
        nodeId: undefined,
        //指标index
        indexType: "COLLECT",
        params: [
          {
            minute: undefined,
            count: undefined
          }
        ]
      },
      tableData: [],
      lineData: [],
      //选中code
      codes: [],
      // //选中指标名称
      indexNames: [],
      datas: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        numRule: [{ type: "number", validator: checkNum, trigger: "change" }]
      },
      options: [
        {
          value: "tableOpen",
          label: "参数打开"
        },
        {
          value: "tableClose",
          label: "参数收缩"
        }
      ],
      addTableSelect: [],
      liveLineChartData: {
        datas: [],
        legendArr: [],
        timeList: [],
        legendNameArr: []
      },
      selectYaxis: [],
      activeName: "second",
      code: undefined,
      rows: [],
      //单位
      unitOptions: [],
      currentNode: undefined,
      indexCategoryDefaultVal: undefined,
      unitDefaultVal: undefined,
      intervalTime: undefined,
      timer: undefined,
      vuename: "",
      height: null
    };
  },
  created() {
    this.getConfigKey("dataMonitoring.realTimeTrend.pastMinute").then(
      response => {
        this.queryParams.minute = response.msg;
      }
    );
    this.getConfigKey("dataMonitoring.realTimeTrend.piontCount").then(
      response => {
        this.count = response.msg;
      }
    );
    this.getDicts("sys_unit").then(response => {
      this.unitOptions = response.data;
    });
  },
  mounted() {
    clearInterval(this.timer);
    clearInterval(timers);
    timers = setInterval(this.setTimer, 50);
    this.getConfigKey("dataMonitoring.realTimeTrend.intervalTime").then(
      response => {
        if (response.code === 200) {
          this.intervalTime = response.msg;
          this.timer = setInterval(this.getLineDataList, this.intervalTime);
        }
      }
    );
  },
  beforeDestroy() {
    // 页面销毁时 要停止计时器，否则选项卡切换计时器不停止，会越来越快，多个线程
    clearInterval(this.timer);
    clearInterval(timers);
  },
  methods: {
    setTimer() {
      let that = this;
      this.$nextTick(() => {
        that.$refs.dataTable && that.$refs.dataTable.doLayout();
      });
    },
    setCharts() {
      this.height = window.innerHeight - 300 + "px";
    },
    modelNodeChange(modelNode) {
      this.queryParams.nodeId = modelNode;
      this.getList();
      this.disabledSetting =
        modelNode === undefined || modelNode === "" || modelNode === null;
      if (modelNode) {
        this.currentNode = modelNode;
      }
      if (this.$refs.lincharVue != undefined && this.$refs.lincharVue != null) {
        this.$refs.lincharVue.closeLineChar();
      }
    },
    /** 查询指标信息列表 */
    getList() {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          var search = this.queryParams;
          search.params[0].minute = this.queryParams.minute;
          search.params[0].count = this.count;
          //表格数据
          getSvgTrendSettingIndex(search).then(response => {
            this.tableData = response.data;
            this.total = response.total;
            this.addTableSelect = [];
            //表格下拉选择
            for (let j = 0; j < 5 && j < this.tableData.length; j++) {
              let optionItem = {
                yValue: "y" + j,
                yLable: "Y" + j
              };
              this.addTableSelect.push(optionItem);
            }
            this.loading = false;
          });
        }
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getTime() {
      //显示时间
      //this.timeArr = [this.startTime,this.endTime];
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.drawChars(selection);
      // if(selection.length > 1){  //单选时为1，需要选择n项改数值为n就可以
      //   this.$refs.dataTable.toggleRowSelection(selection[0],false);//超出指定选择个数后，把第一个选中的selection设为false
      //   selection.splice(0,1);//同时要把选中第一项移除
      // }
    },
    drawChars(selection) {
      this.codes = selection.map(item => item.code);
      this.indexNames = selection.map(item => item.indexName);
      this.selectYaxis = selection.map(item =>
        item.yValue ? item.yValue : ""
      );
      if (this.codes.length > 0) {
        this.cleanLineData();
        this.vuename = "lincharVue";
        this.getLineDataList();
      } else {
        this.cleanLineData();
        if (
          this.$refs.lincharVue != undefined &&
          this.$refs.lincharVue != null
        ) {
          this.$refs.lincharVue.closeLineChar();
        }
      }
    },
    getLineDataList() {
      let that = this;
      this.$nextTick(() => {
        that.$refs.dataTable.doLayout();
      });
      if (this.codes.length > 0) {
        this.cleanLineData();
        //折线图数据
        getTrendSettingIndexLineData(
          this.codes,
          this.queryParams.minute,
          this.count
        ).then(response => {
          //数据添加
          this.liveLineChartData.datas = response.data;
          this.$nextTick(() => {
            that.$refs.dataTable.doLayout();
          });
          // x轴时间添加
          for (let i = 0; i < this.liveLineChartData.datas[0].length; i++) {
            this.liveLineChartData.timeList.push(
              this.liveLineChartData.datas[0][i].showDataTime
            );
          }
          //曲线名称添加
          this.liveLineChartData.legendNameArr = this.indexNames;
          this.liveLineChartData.legendArr = this.selectYaxis;
        });
      }
    },
    selectNumber(row, index) {
      let selection = this.$refs.dataTable.selection;
      this.drawChars(selection);
    },
    cleanLineData() {
      this.liveLineChartData.legendArr = [];
      this.liveLineChartData.timeList = [];
      this.liveLineChartData.datas = [];
      this.liveLineChartData.legendNameArr = [];
    },
    closeDialog() {
      this.activeName = "";
    },
    openDialog(e, type) {
      this.dialogType = type;
      if (e) {
        this.code = e.code;
        this.open = true;
        this.activeName = "second";
        this.title = type === "line" ? "历史曲线查询" : "历史数据";
      }
    },
    cancelDialog() {
      this.open = false;
    },
    // 单位字典翻译
    unitFormat(row, column) {
      return this.selectDictLabel(this.unitOptions, row.indexUnit);
    }
  }
};
</script>
<style scoped lang="scss">
.tableStyle .el-table__header-wrapper .el-checkbox {
  display: none;
}

.trendLineChart-right {
  height: 100%;
  overflow: hidden;
}
</style>
